<template>
	<div id="leftBarbody">
		<div id="tools" v-if="loginStatus==1">
			<div @click="write()">写博客</div>
		</div>
		<div class="blog" v-for="(item,index) in blogs" :key="index" @click="toURL(item.id,index)">
			<img class="istop" v-if="item.is_top == 1" src="../assets/leftbar/listFixedTop.png" />
			<div class="title">{{item.title}}</div>
			<div class="time">{{item.create_time.substring(0,10)}}</div>
			<div class="content">
				<p>
					{{item.description}}
				</p>
			</div>
			<div class="blogbtn" >
				<div class="btn" v-if="item.is_top == 1 && loginStatus==1" @click.stop="blogcanceltop(item.id,index)">取消置顶</div>
				<div class="btn" v-if="item.is_top == 0 && loginStatus==1" @click.stop="blogtotop(item.id,index)">置顶</div>
				<div class="btn" v-if="loginStatus==1" @click.stop="blogedit(item.id,index)">编辑</div>
				<div class="btn" v-if="loginStatus==1" @click.stop="blogremove(item.id,index)">删除</div>
				<div><img src="../assets/leftbar/readCountWhite.png"/></div>
				<span>{{item.views}}</span>
				<div><img src="../assets/leftbar/commentCountWhite.png"/></div>
				<span>0</span>
				
			</div>
		</div>
		<!-- <div>页数</div> -->
		<pagebar 
			class="pagebar"
			v-on:getblogs="getblogs"
		></pagebar>
		<modal 
			:title="showtitle"
			:content="showcontent"
			v-show="showModal" 
			v-on:closeme="closeme"
			v-on:confirm = "confirm"
		></modal>
	</div>
</template>

<script>
	import config from '../../config.js'
	import util from '../../util.js'
	import pagebar from './tools/pagebar.vue'
	import modal from './tools/modal.vue'
	export default {
	  name: 'leftBar',
	  props: {
		msg: String
	  },
	  components:{
		  pagebar,
		  modal
	  },
	  data() {
		return {
			blogs:[],
			username:this.$root.username,
			localhost:config.localhost,
			port:config.port,
			loginStatus:this.$root.loginStatus,
			Totalpage:10,
			showModal:false,
			delid:-1,
			delind:-1,
			showtitle:'删除该博客',
			showcontent:'确认删除该博客？'
		}
	  },
	  //挂载阶段
	   mounted: function(){
		 //   let that = this,
			//    token = this.$root.token;
		 //   let api='http://'+this.localhost+':3306/getblogbypage';
		 //   let page = window.localStorage.getItem('page');
		 //   page = page == undefined ? 1 : page;
		 //   this.$http.get(api,{params: {token:token,page:page}}).then((response)=>{
			// console.log('leftbar----mounted1',response,page);
			// that.blogs = response.body.data;
		 //   },function(err){
			// console.log(err);
		 //   })
		 },
	  methods:{
		  //查看博客内容
		  toURL(id,index){
			  this.addview(id,index);
			  this.$router.push({path:'/ArticleRead',query:{id:id,index:index,flag:0}});
		  },
		  //写博客
		  write(){
			  this.$router.push('/ArticleWrite');
		  },
		  //获取展示的博客内容
		  getblogs(ind){
			  let that = this,
				   token = this.$root.token,
				   api='http://'+this.localhost+':'+this.port+'/getblogbypage';
			  //缓存当前页数
			  window.localStorage.setItem('page',ind);
			  this.$http.get(api,{params: {token:token,page:ind}}).then((response)=>{
					that.blogs = response.body.data;
			  },function(err){
					console.log(err);
			  })
		  },
		  //取消置顶
		  blogcanceltop(id,index){
			  let that = this,
				  token = this.$root.token,
				  api='http://'+this.localhost+':'+this.port+'/blogcanceltop';
			  this.$http.get(api,{params: {token:token,id:id}}).then((response)=>{
				that.blogs[index].is_top = 0;
				that.$router.push('/');
				that.$router.go(0);
			  },function(err){
				console.log(err);
			  })
		  },
		  //博客置顶
		  blogtotop(id,index){
			  let that = this,
				  token = this.$root.token,
				  api='http://'+this.localhost+':'+this.port+'/blogtotop';
			  this.$http.get(api,{params: {token:token,id:id}}).then((response)=>{
				that.blogs[index].is_top = 1;
				that.$router.push('/');
				that.$router.go(0);
			  },function(err){
				console.log(err);
			  })
		  },
		  //编辑博客
		  blogedit(id,index){
			  this.$router.push({path:'/ArticleRead',query:{id:id,index:index,flag:1}});
		  },
		  //点击添加浏览量
		  addview(id,index){
			  let that = this,
				  token = this.$root.token,
				  api='http://'+this.localhost+':'+this.port+'/addview';
			  this.$http.get(api,{params: {token:token,id:id}}).then((response)=>{
				  that.blogs[index].views ++;
			  },function(err){
				  console.log(err);
			  })
		  },
		  //显示弹窗
		  blogremove(id,index){
			  this.showcontent = '确认删除《' + this.blogs[index].title +'》?'
			  this.showModal = !this.showModal;
			  this.delid = id;
			  this.delind = index;
		  },
		  //确认删除
		  confirm(){
			let that = this,
			    token = this.$root.token,
				id = this.delid,
				index = this.delind,
				api='http://'+this.localhost+':'+this.port+'/removeblog';
			this.$http.get(api,{params: {token:token,id:id}}).then((response)=>{
				  that.blogs[index].published = 0;
				  that.$router.push('/');
				  that.$router.go(0);
			},function(err){
				  console.log(err);
			})  
		  },
		  //关闭弹窗
		  closeme(){
		    this.showModal = !this.showModal;
		  }
	  }
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	#leftBarbody{
		background-color: #e2e1e4;
		border-radius: 0.625rem;
		/* border: #000000 0.0625rem solid; */
	}
	#leftBarbody .blog{
		min-height: 7.8125rem;
		overflow: hidden;
		margin-top: 0.3125rem;
		background-color: #c3d7df;
		opacity: 0.9;
		position: relative;
		
	}
	#leftBarbody .blog .istop{
		position: absolute;
		top: 0;
		right: 0;
	}
	#leftBarbody .blog:hover .title{
		color: coral;
	}
	#leftBarbody .blog .blogbtn{
		display: flex;
		cursor: default;
		z-index: 10;
	}
	#leftBarbody .blog .blogbtn div{
		margin-left: 0.9375rem;
		min-height: 1.5rem;
		line-height: 1.5rem;
		/* border: #000000 1px solid; */
	}
	#leftBarbody .blog .blogbtn div img{
		height: 1.5rem;
		width: 1.5rem;
	}
	#leftBarbody .blog .blogbtn span{
		margin-left: 0.2rem;
		line-height: 1.5rem;
		/* border: #000000 1px solid; */
	}
	#leftBarbody .blog .blogbtn .btn:hover{
		color: coral;
	}
	
	#leftBarbody .blog .title{
		font-size: large;
		font-weight: bold;
		text-align: left;
		margin-left: 0.9375rem;
	}
	#leftBarbody .blog .time{
		font-size: small;
		text-align: left;
		margin-left: 0.9375rem;
		margin-top: 0.5rem;
	}
	#leftBarbody .blog .content{
		font-size: medium;
		text-align: left;
		margin-left: 0.9375rem;
	}
	#leftBarbody .pagebar{
		
	}
	
</style>
